<%@ page import="ar.com.photo_admin.domain.EventAlbum" %>
<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
	xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
	<meta name="layout" content="main">
	
	<!-- CSS to style the Guidely feature -->
	<link rel="stylesheet"
		href="${resource(dir:'css',file:'guidely.css')}" type="text/css" />
</head>
<body>
	<div class="showField separator"></div>				
		
	<g:if test="${flash.message}">
		<div class="alert alert-success">  
		  <a class="close" data-dismiss="alert">×</a>  
		  <div class="message">${flash.message}</div>  
		</div>  
	</g:if>
	
	<g:hasErrors bean="${eventAlbumInstance}">
		<g:eachError bean="${eventAlbumInstance}" var="error">
			<div class="alert alert-error">
				<a class="close" data-dismiss="alert">×</a>
				<g:message error="${error}" />
			</div>
		</g:eachError>
	</g:hasErrors>
			
	<g:form name="albumForm" >	 
		 
		<div id="albumHeader" class="row">
			<div id="thumbnailContainer" class="span4">
				<g:if test="${eventAlbumInstance.coverPhoto}">
					<img id="coverPhotoImage"
						src="${eventAlbumInstance?.coverPhoto?.getPublishedUrl()}"
						class="coverPhoto thumbnail" name="${eventAlbumInstance?.coverPhoto?.id}"></img>
				</g:if>
				<g:else>
					<img id="coverPhotoImage"
						src="${resource(dir:'images', file: 'defaultImage.jpg')}"
						class="coverPhoto thumbnail" name="0"></img>
				</g:else>
			</div>

			<div class="span8">				
				<div class="page-header">
					<h1><g:message code="eventAlbum.label" />: ${eventAlbumInstance?.name}</h1>
				</div>

				<div class="titleDescription">
					<p>${eventAlbumInstance?.description}</p>
				</div>															
			</div>
		</div>
	</g:form>
			
	<div class="separator"></div>
	
	<div id="btn-group" class="btn-group ">
		<button id="start-slideshow-show" class="btn btn-success" data-slideshow="5000" data-target="#modal-gallery" data-selector="#gallery a[rel=gallery]"><g:message code="show.slides" /></button>
		
		<g:isEventClientOrOwner eventId="${eventAlbumInstance?.event.id}">
			<button id="btn_edit" class="btn btn-success" ><g:message code="edit" /></button>			
		</g:isEventClientOrOwner>
		
		<button id="btn_back" class="btn btn-success"><g:message code="eventAlbum.backToEvent" /></button>
		
		<button id="btn_addAllToShoppingCart" class="btn btn-success" ><i class="icon-shopping-cart icon-white"></i><span><g:message code="eventAlbum.addAllToCart" /></span></button>
		
		<button id="btnHelp" class="btn btn-info " ><g:message code="help" /></button>
	</div>
	
	<div class="separator"></div>
	
	<!-- En este div se almacenaran las imagenes que se encuentran seleccionadas en el album -->							
	<div id="gallery" data-toggle="modal-gallery" data-target="#modal-gallery" class="row"></div>

	<g:render template="/common/modalImageGallery" 
				  model="${[addToCartVisibility: true]}" />					
				
	<g:render template="albumShowController" />
						
	
	<g:javascript src="imagePreview.js" />
		
	<g:javascript src="model/Album.js" />
	<g:javascript src="model/Photo.js" />
	<g:javascript src="guidely.js" />
	
	<script type="text/javascript">
		jQuery(document).ready(function(){
	
			var albumId = "${eventAlbumInstance?.id}";
			var albumName = "${eventAlbumInstance?.name}";
			var albumDescription = "${eventAlbumInstance?.description}";
			var eventName = "${eventAlbumInstance?.event?.name}";		
			var shoppingPostingUrl = "${createLink(controller: 'shoppingCart', action: 'addPhoto')}";
			var shoppingRemovalPostingUrl = "${createLink(controller: 'shoppingCart', action: 'removePhoto')}";			
	
			albumController = new EventAlbumShowController(albumId, shoppingPostingUrl, shoppingRemovalPostingUrl, eventName, albumName, albumDescription);										
	
			// Carga las fotos almacenadas		
			albumController.loadSelectedPhotos(${selectedPhotos});	
			
			jQuery("#btn_addToShoppingCart").click(function(){																										
				albumController.addToShoppingCartFromModal();
			});
			
			jQuery("#btn_edit").click(function(){
				var successUrl = "${createLink(controller: 'eventAlbum', action: 'edit', id: eventAlbumInstance?.id)}";
				window.location.replace(successUrl);
			});
			
			jQuery("#btn_back").click(function(){
				var successUrl = "${createLink(controller: 'event', action: 'show', id: eventAlbumInstance?.event?.id)}";
				window.location.replace(successUrl);
			});
	
			jQuery("#btn_addAllToShoppingCart").click(function(){
				var shoppingPostingUrl = "${createLink(controller: 'shoppingCart', action: 'addAllPhotosFromAlbum')}";
				albumController.addAllToShoppingCart(shoppingPostingUrl);
			});
	
			imagePreview();		
	   	});
	</script>
	
	<script type="text/javascript">
			jQuery(document).ready(function(){
				jQuery('#btnHelp').click(function () {								
					initGuidely();				
				});														

				function initGuidely(){		

					guidely.clear();
					
					jQuery('#guidelyContainer').remove();
					jQuery('body').append('<div id="guidelyContainer"></div>');
					
					guidely.add ({
						attachTo: '#start-slideshow-show'
						, anchor: 'bottom-middle'	
						, title: 'Ver Presentación'						
						, text: 'Vea las fotos del album en una presentación'
					});
					
					guidely.add ({
						attachTo: '#btn_addAllToShoppingCart'
						, anchor: 'bottom-middle'
						, title: 'Seleccione las fotos'						
						, text: 'Agregue todas las fotos del album a su carro de compras'
					});

					var chosenCartIconUrl = "${resource(dir:'images', file: 'cartSelected_s.png')}";
					var unchosenCartIconUrl = "${resource(dir:'images', file: 'cart_s.png')}";
					// Solo agrega el paso en caso de que hayan fotos para agregar					
					if (albumController.getSelectedIdFirstImage() != null){					
						guidely.add ({
							attachTo: '#'+albumController.getSelectedIdFirstImage()
							, anchor: 'middle-middle'
							, title: 'Seleccione las fotos!'
							, text: 'Agregue una foto al carro de compras haciendo click sobre <img src="'+unchosenCartIconUrl+'" alt="image"></img>. '
							 		+' Una vez que se haya agregado podrá ver el botón <img src="'+chosenCartIconUrl+'" alt="image"></img>. ' 
							
						});
					}

					/*
					guidely.add ({
						attachTo: '#cartToolbarIcon'
						, anchor: 'bottom-middle'
						, title: 'Ordene sus fotos!'
						, text: 'Una vez que haya terminado de elegir las fotos, dirigase a la página "Personalización de la Compra" para completar su pedido' 
						
					});
					*/
											
					guidely.init ({ 
						showOnStart: true,
						welcome:false,											
						startTrigger: false });				
				}					
			});	
	</script>
</body>
</html>
